<template>
    <view class="withdrawal tn-safe-area-inset-bottom">
        <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false">提现记录</tn-navbar>

        <view class="withdrawal-list">

            <view class="withdrawal-list-item tn-flex-column" v-for="(withdrawal, index) in withdrawalList">

                <view class="item-top tn-flex-rows">
                    <view class="item-top-left tn-flex-5">
                        提现
                    </view>
                    <view class="item-top-right tn-flex-3">
                        {{ formatToDateTime(withdrawal.createTime * 1000) }}
                    </view>
                </view>
                <view class="item-bottom tn-flex-rows">
                    <view class="item-bottom-left tn-flex-5" :class="isWarning(withdrawal.status) ? 'warning-text' : ''">
                        {{ getStatusDesc(withdrawal.status) }}
                    </view>
                    <view class="item-bottom-right tn-flex-1 tn-color-main">
                        {{ withdrawal.price }}
                    </view>
                </view>

            </view>

            <tn-empty :show="emptywithdrawalList" mode="data"></tn-empty>
            <tn-load-more class="load-more" v-if="!emptywithdrawalList" :status="loadingStatus"
                :load-tips-text="loadMoreTipsText"></tn-load-more>
        </view>
    </view>
</template>
  
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import TnEmpty from "@/tuniao-ui/components/tn-empty/src/Empty.vue";
import TnLoadMore from "@/tuniao-ui/components/tn-load-more/src/LoadMore.vue";
import { LoadMoreStatus } from "@/tuniao-ui/types/tn-load-more";
import { ResultEnum } from "@/enums/httpEnum";
import { findWithdrawalPage } from "@/api/withdrawal";
import { formatToDateTime } from "@/utils/dateUtil";
import { onReachBottom } from "@dcloudio/uni-app";

const emptywithdrawalList = ref(false);

const loadMoreTipsText = {
    loadmore: "上滑加载更多",
    loading: "正在加载中...",
    nomore: "没有更多数据了",
};
// 提现接口
interface withdrawalVO {
    id: number;
    memberId: number;
    price: number;
    status: number;
    createTime: number;
}
const withdrawalList = ref<withdrawalVO[]>([]);
const haveData = ref(true);
const currentPage = ref(1);
const pageSize = ref(10);

// 加载状态
const loadingStatus = ref<LoadMoreStatus>("loadmore");


function getStatusDesc(status: number) {
    let result = '';
    switch (status) {
        case 0:
            result = '待审核';
            break;
        case 1:
            result = '审核通过，打款中';
            break;
        case 2:
            result = '驳回';
            break;
        case 3:
            result = '打款成功';
            break;
        case 4:
            result = '取消';
            break;
        default:
            result = '异常';
    }
    return result;
}

function isWarning(status: number) {

    if (status == 2 || status == 4) {
        return true;
    }
    return false;
}

async function loadMorewithdrawal() {
    if (!haveData.value) {
        return;
    }
    loadingStatus.value = "loading";
    const { code, result } = await findWithdrawalPage({
        current: currentPage.value,
        size: pageSize.value
    });
    if (code === ResultEnum.SUCCESS) {
        if (result.records.length < 1) {
            //loadingStatus.value = "nomore";
            console.log("没有更多数据了");
            haveData.value = false; // 标记无数据了
            if (currentPage.value === 1) {
                emptywithdrawalList.value = true;
            }
        }
        withdrawalList.value = withdrawalList.value.concat(result.records);
        currentPage.value++;
    }
    loadingStatus.value = "nomore";
}

onMounted(() => {
    loadMorewithdrawal();
});
// 页面刷到底部
onReachBottom(() => {
    loadMorewithdrawal();
});
</script>
  
<style lang="scss" scoped>
.withdrawal {
    &-list {
        &-item {
            margin-top: 20rpx;
            background-color: #fff;
            height: 150rpx;
            padding: 0 20rpx;

            .item-top {
                height: 40%;
                align-items: center;

                &-left {
                    font-size: 30rpx;
                    

                }

                &-right {
                    justify-content: flex-end;
                    color: #999;
                }

            }

            .item-bottom {
                height: 60%;
                align-items: center;

                &-left {
                    font-size: 25rpx;

                }

                &-right {
                    justify-content: flex-end;
                    font-size: 35rpx;
                }
                .warning-text {
                    color: #f00;
                }
            }

            // .item-left {
            //         align-items: center;
            //     image {
            //         width: 100rpx;
            //         height: 100rpx;
            //         border-radius: 100rpx;
            //     }

            //     text {
            //         display: flex;
            //         justify-content: center; 
            //         align-items: center;
            //         margin-left: 30rpx;
            //     }
            // }

            // .item-right {
            //     justify-content: center;
            //     align-items: center;
            //     color: #999;
            // }
        }
    }
}
</style>
  